<template>
	<view style="display: flex;flex-direction: column;">
		<uniNavBarMineClassify :fixed="true" status-bar :border="false">
			 <view style="width: 100%;display: flex;justify-content: center;align-items: center;">
				<view style="color: #181819;font-size: 16px;font-weight: 600;">
					商品分类
				</view>
			 </view>
		</uniNavBarMineClassify>

		<view style="position: relative;z-index: 999;padding-top: 10px;">
			<uni-row :gutter="0">
				<uni-col :span="7">
					<view style="padding-bottom: 10px;">
						<scroll-view scroll-top="0" scroll-y="true"  :style="{height: `${windowHeight-110}px`}">
							<view v-for="item,index in kindList" :key="index" :class="item.goodsId === goodsId ?'selectMenuBj':'defMenuBj'"  @click="handMenu(item)" style="height: 60px;display: flex;align-items: center;justify-content: center;padding: 5px;">
								<text style="color: #181819;font-size: 14px;">
									{{item.goodsName}}
								</text>
							</view>
						</scroll-view> 
					</view>
				</uni-col>
				<uni-col :span="17">
					<view  style="padding-bottom: 10px;">
						<scroll-view  :class="goodsId !== 0 ?'defRightMenuBj':''"  scroll-top="0" scroll-y="true"  :style="{height: `${windowHeight-110}px`}">
							<uni-row :gutter="10">
								<!-- <uni-col :span="8">
									<view style="margin-bottom: 10px;position: relative;flex: 1;flex-direction: column;">
										<image src="https://mall-1308822118.cos.ap-beijing.myqcloud.com/ba8927fb4f844891bcd2408b02448a57.png" style="height: 80px;border-radius: 5px;"></image>
										<view style="display: flex;flex-direction: row;align-items: center;font-size: 14px;color: #161819;justify-content: center;margin-top: 5px;">
											<text>今日新闻热点123嘎嘎嘎</text>
										</view>
									</view>
								</uni-col> -->
								<uni-col v-for="itemChild,indexs in kindChildList" :key="indexs" :span="8">
									<view @click="handChildMenu(itemChild)" style="margin-bottom: 10px;position: relative;flex: 1;flex-direction: column;">
										<image v-if="itemChild.goodsUrl !== null && itemChild.goodsUrl !== ''" :src="itemChild.goodsUrl" style="height: 80px;border-radius: 5px;"></image>
										
										<image v-else src="../../static/images/noPics.png" style="height: 80px;border-radius: 5px;"></image>
										<!-- <view v-else style="border: 1px solid #181819;height: 80px;border-radius: 5px;display: flex;flex-direction: column;align-items: center;justify-content: center;">
											<image src="../../static/images/pics123.png" style="width: 25px;height: 25px;"></image>
											<text style="font-size: 12px;color: #181819;">暂无图片</text>
										</view> -->
										<view style="display: flex;flex-direction: row;align-items: center;font-size: 14px;color: #161819;justify-content: center;margin-top: 5px;">
											<text>{{itemChild.goodsName}}</text>
										</view>
									</view>
								</uni-col>
							</uni-row>
						</scroll-view> 
					</view>
				</uni-col>
			</uni-row>
		</view>
<!-- 		<view style="border: 2px solid black;height: 100%;width: 300rpx;">
		</view>
		<view style="border: 2px solid blue;height: 100%;width: 100%;">
		</view> -->
	</view>
</template>

<script>
	import { handleTree } from '../../utils/common.js'
	import uniNavBarMineClassify from '../../components/uni-nav-barMineClassify/components/uni-nav-bar/uni-nav-barMine.vue'
	
	export default {
		onLoad(option) {
			if(typeof option.goodsId !== 'undefined'){
				this.goodsId = option.goodsId;
				console.log('___商品分类，_onLoad__',option.goodsId)
			}
		},
		onShow() {
			console.log('___商品分类，_onShow__')
			this.initData();
		},
		created() {
			// uni.$on('hideCanvas',function(data){
			// 	console.log('监听到事件来自 update ，携带参数 msg 为：' + data);
			// })
		},
		data() {
			return {
				txCloudEnvID:getApp().globalData.config.appInfo.txCloudEnvID,
				vxService:getApp().globalData.config.appInfo.vxService,
				kindList:[],
				kindChildList:[],
				defLeftMenuClass: 'defMenuBj',//默认左侧菜单样式
				selectLeftMenuClass: 'selectMenuBj',//选中左侧菜单样式
				goodsId: 0,
				
			}
		},
		computed:{
		  windowHeight() {
			return uni.getSystemInfoSync().windowHeight - 0
		  }
		},
		components:{
			uniNavBarMineClassify
		},
		methods: {
			initData(){
				let _this = this;
				wx.cloud.callContainer({
				  "config": {
				    "env": this.txCloudEnvID
				  },
				  "path": "/system/kind/list",
				  "header": {
				    "X-WX-SERVICE": this.vxService,
				    "content-type": "application/json"
				  },
				  "method": "GET",
				  "data": ""
				}).then((res) =>{
					//console.log(res)//status: 400
					if(res.data.code == 200){
						// console.log(res.data.data)
						let kindOneListFilter = [];
						this.kindList = [];
						res.data.data.forEach((item) =>{
							if(item.status == '0' && item.parentId == 0){
							  kindOneListFilter.push(item);
							}
						});
						 let kindTwoListFilter = [];
						kindOneListFilter.forEach((items)=>{
						  kindTwoListFilter.push(items);
						  res.data.data.forEach((item) =>{
							if(item.parentId === items.goodsId && item.status === '0'){
							  kindTwoListFilter.push(item);
							}
						  });
						})
						this.kindList = handleTree(kindTwoListFilter, "goodsId");
						console.log(this.kindList)
						if(this.kindList.length > 0){
							
							console.log('___初始化加载_this.goodsId__商品分类主键id__',_this.goodsId)
							this.kindChildList = [];
							if(_this.goodsId > 0){
								this.kindList.forEach((item) =>{
									if(item.goodsId == _this.goodsId){
										_this.goodsId = item.goodsId;
										if(typeof item.children !== 'undefined'){
											this.kindChildList = item.children;
										}
									}
								});
							}else{
								this.goodsId = this.kindList[0].goodsId;
								if(typeof this.kindList[0].children !== 'undefined'){
									this.kindChildList = this.kindList[0].children;
								}
							}
						}
						
					}
				}).catch((e) =>{
					console.log(e.message);
					if(e.message.indexOf('102002') !== -1){
						this.$modal.showToast('请求超时')
					}else if(e.message.indexOf('-606003') !== -1){
						this.$modal.showToast('账号欠费，登录失败，请联系管理员')
					}else{
						this.$modal.showToast('系统异常，请联系管理员')
					}
				})
			},
			handMenu(item){//点击左侧一级菜单，对应二级菜单。
				this.goodsId = item.goodsId;
				this.kindChildList = []
				if(typeof item.children !== 'undefined'){
					this.kindChildList = item.children;
					console.log(item.goodsId,'___',item.goodsName,'___',item.children)
				}
			},
			handChildMenu(item){
				console.log(item.goodsId,'___',item.goodsName)
				this.$tab.navigateTo("/pages/goodslist/index?goodsId="+item.goodsId);
			}
			
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F6F6F6;
	}
	
	.defMenuBj{
		background-color: #F1F1F1;
	}
	.selectMenuBj{
		border-left: 5px solid #c2b292;
		background-color: #ffffff;
	}
	.defRightMenuBj{
		background-color: #ffffff;
		padding: 10px 10px 0 10px;
	}
	
</style>
